<template>
    <div class="wrap-cont new-share">
        <div class="wrap-cont-cover">
            <el-form :model="shareForm" :rules="rules" ref="shareForm" label-width="100px" size="mini">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="shareForm.title"></el-input>
                </el-form-item>
                <el-form-item label="封面">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        name="multipartFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        accept="image/png,image/gif,image/jpg,image/jpeg">
                        <img v-if="shareForm.cover" :src="baseURL+shareForm.cover" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="所属类别" prop="idolId">
                    <el-select v-model="shareForm.idolId" filterable placeholder="请选择" clearable size="mini ">
                        <el-option
                            v-for="item in idolsList"
                            :key="item.idolId"
                            :label="item.name"
                            :value="item.idolId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <editor
                        ref="editorElem"
                        @onchange="editorChange"></editor>
                </el-form-item>
            </el-form>
            <div class="center">
                <el-button type="primary" @click="handleSend" size="mini">发 布</el-button>
            </div>

        </div>
    </div>
</template>

<script type="text/javascript">
    import Editor from '../../components/main/jy-editor.component'
    import {baseURL} from "../../utils/axios";

    export default {
        name: "new-share",
        components: {Editor},
        data() {
            var contentValid = (rule, value, callback) => {
                if (!this.filterHTMLTag(value)) {
                    callback('请输入内容')
                }
                else {
                    callback();
                }
            };
            return {
                shareForm: {
                    title: '',
                    cover: '',
                    content: '',
                    idolId: '',
                },
                idolsList: [],
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur', whitespace: true},
                    ],
                    idolId: [
                        {required: true, message: '请选择', trigger: 'blur'},
                    ],
                    content: [
                        {required: true, validator: contentValid, trigger: 'change'}
                    ],
                },
                baseURL: baseURL,
                uploadUrl: baseURL + '/api/common/uploadFile?type=amwayImg'
            }
        },
        methods: {
            editorChange(html) {
                this.shareForm.content = html;
            },
            handleSend() {
                this.$refs.shareForm.validate(valid => {
                    if (valid) {
                        this.$api.amway.addAmway({
                            content: this.shareForm.content,
                            idolId: this.shareForm.idolId,
                            images: this.shareForm.cover,
                            publisherId: sessionStorage.getItem('id'),
                            title: this.shareForm.title,
                        }).then(res => {
                            this.$router.push({name:'amway'})
                        })
                    }
                })
            },
            filterHTMLTag(msg) {
                // var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
                // msg = msg.replace(/[|]*\n/, '') //去除行尾空格
                // msg = msg.replace(/&nbsp;/ig, ''); //去除nbsp
                msg = msg.replace(/<[^>]+>|&[^>]+;/g, "").trim();//去掉所有的html标签和&nbsp;之类的特殊符合
                return msg;
            },
            handleAvatarSuccess(res, file) {
                this.shareForm.cover = res.msg;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            getList() {
                this.$api.idol.idolList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.idolsList = res.data.list;
                })
            },
        },
        mounted() {
            this.getList()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .new-share {

        .el-form {
            width: calc(100% - 50px);
        }
        .center {
            text-align: center;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: $text-color-primary;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
